<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>zGallering Free Html5 Responsive Template</title>
	<meta name="description" content="Free Html5 Templates and Free Responsive Themes Designed by Kimmy | zerotheme.com">
	<meta name="author" content="www.zerotheme.com">
	
    <!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="./resources/css/style.css">
    <link rel="stylesheet" href="./resources/css/responsive.css">
	<link rel='stylesheet' href="./resources/css/camera.css"> 
	
	<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->
	
	<link href='./resources/images/favicon.ico' rel='icon' type='image/x-icon'/>
    
	<script type='text/javascript' src='./resources/js/jquery.min.js'></script>
	<script type='text/javascript' src='./resources/js/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='./resources/js/camera.min.js'></script> 
    
    <script>
		jQuery(function(){
			jQuery('#camera_wrap').camera({
				height: '400px',
				loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>
	
</head>
<body>
<!--------------Header--------------->
<header> 
	<div class="pagetop">
		<div class="wrap-pagetop">
			<div class="shareicons">
				<ul>
					<li><a href="#"><img src="./resources/images/rss-icon.png" title="RSS"/></a></li>
					<li><a href="#"><img src="./resources/images/digg-icon.png" title="Digg"/></a></li>
					<li><a href="#"><img src="./resources/images/facebook-icon.png" title="Facebook"/></a></li>
					<li><a href="#"><img src="./resources/images/google-icon.png" title="Google+"/></a></li>
					<li><a href="#"><img src="./resources/images/twitter-icon.png" title="Twitter"/></a></li>
					<li><a href="#"><img src="./resources/images/sharethis-icon.png" title="Sharethis"/></a></li>
					<li><a href="#"><img src="./resources/images/linkedin-icon.png" title="Linkedin"/></a></li>
				</ul>
			</div>
			<div id="search">
				<div class="button-search"></div>
				<input type="text" value="Search..." onFocus="if (this.value == &#39;Search...&#39;) {this.value = &#39;&#39;;}" onBlur="if (this.value == &#39;&#39;) {this.value = &#39;Search...&#39;;}">
			</div>
		</div>
	</div>
	<div class="wrap-header">
		<div id="logo"><a href="#"><img src="./resources/images/logo.png"/></a></div>
		<nav>
			<ul>
				<li class="current"><a href="index.html">Home</a></li>
			  <li><a href="blog.html">Blog</a></li>
			  <li><a href="single.html">About</a></li>
			  <li><a href="single.html">Contact</a></li>
		  </ul>
		</nav>
	</div>
</header>
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >Website Template</a></div>

<!--------------Content--------------->
<section id="content">
	<div class="feature">
		<div class="camera_wrap camera_magenta_skin" id="camera_wrap">
            <div data-thumb="./resources/images/slides/thumbs/1.jpg" data-src="./resources/images/slides/slide1.jpg">
                <div class="camera_caption fadeFromBottom">
                    Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                </div>
            </div>
            <div data-thumb="./resources/images/slides/thumbs/2.jpg" data-src="./resources/images/slides/slide2.jpg">
                <div class="camera_caption fadeFromBottom">
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                </div>
            </div>
            <div data-thumb="./resources/images/slides/thumbs/3.jpg" data-src="./resources/images/slides/slide3.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
			<div data-thumb="./resources/images/slides/thumbs/4.jpg" data-src="./resources/images/slides/slide4.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
			<div data-thumb="./resources/images/slides/thumbs/5.jpg" data-src="./resources/images/slides/slide5.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
			<div data-thumb="./resources/images/slides/thumbs/6.jpg" data-src="./resources/images/slides/slide6.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
			<div data-thumb="./resources/images/slides/thumbs/7.jpg" data-src="./resources/images/slides/slide7.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
			<div data-thumb="./resources/images/slides/thumbs/8.jpg" data-src="./resources/images/slides/slide8.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely free</em> (even if a donation is appreciated)
                </div>
            </div>
        </div>
		<div style="clear:both; display:block; height:10px"></div>
	</div>
	<div class="welcome">
		<p>Free Html5 Templates created More Templates  <a href="http://www.cssmoban.com" target="_blank" style="color: #DA251D;">Zerotheme</a>. You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files.</p>
	</div>
	<div class="zerogrid">		
		<div class="row block01">
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb1.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb2.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb3.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb4.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb5.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb6.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb7.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb8.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
			<div class="col-1-3">
				<article>
					<a href="blog.html"><img src="./resources/images/thumb9.jpg" class="grayscale"/><h2>Sed accumsan libero</h2></a>
				</article>
			</div>
		</div>
	</div>
</section>
<!--------------Footer--------------->
<footer>
	<div class="zerogrid">
		<div class="row block02">
			<section class="col-1-3">
				<div class="heading"><h2>About us</h2></div>
				<div class="content">
					<p>Free Html5 Templates created More Templates  <a href="http://www.cssmoban.com" target="_blank" style="color: #DA251D;">Zerotheme</a>. You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files.</p>
				</div>
			</section>
			<section class="col-1-3">
				<div class="heading"><h2>Categories</h2></div>
				<div class="content">
					<ul>
						<li><a href="http://www.cssmoban.com">Free Html5 Templates</a></li>
						<li><a href="http://www.cssmoban.com">Free Responsive Themes</a></li>
						<li><a href="http://www.cssmoban.com">Free Html5 and Css3 Themes</a></li>
					</ul>
				</div>
			</section>
			<section class="col-1-3">
				<div class="heading"><h2>Popular Post</h2></div>
				<div class="content">
					<div class="post">
						<img src="./resources/images/port1.jpg"/>
						<h4><a href="blog.html">Lorem ipsum dolor sit amet</a></h4>
						<p>November 11 ,2012</p>
					</div>
					<div class="post">
						<img src="./resources/images/port2.jpg"/>
						<h4><a href="blog.html">Lorem ipsum dolor sit amet</a></h4>
						<p>November 11 ,2012</p>
					</div>
					<div class="post">
						<img src="./resources/images/port3.jpg"/>
						<h4><a href="blog.html">Lorem ipsum dolor sit amet</a></h4>
						<p>November 11 ,2012</p>
					</div>
				</div>
			</section>
		</div>
	</div>
	<div class="copyright">
		<p>Copyright © 2012 - <a href="http://www.cssmoban.com/" target="_blank">Free Html5 Templates</a> More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>
	</div>
</footer>
</body></html>			